<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <!-- 我爱中华人 -->
  <!-- <div>我爱<span style="color: red;">中</span>华人<span style="color: red;">中</span>民共<span style="color: red;">中</span>和国</div> -->
  <script>
    let str = 'a==1&&a==2&&a==3有可A能A是trueA吗'
    // repalce语法 参数一是要替换的字符, 参数2是替换的结果
    /* const res = str.replace('a',`<span style="color: red;">a</span>`)
    console.log(res)
    document.body.innerHTML = res */
    // 以上可以实现a的高亮, 只能实现一个a高亮
    // ------------------------------
    // replace方式参数一不仅可以写字符, 还可以写正则 g global 全局匹配  i ignore 忽略大小写
     /*  const res = str.replace(/a/gi,`<span style="color: red;">a</span>`)
    console.log(res)
    document.body.innerHTML = res */
    /* let keyword = 'a'
    const res = str.replace(/keyword/gi,`<span style="color: red;">a</span>`)
    console.log(res)
    document.body.innerHTML = res */
    // 以上使用正则处理可以实现所有匹配到的结果全部高亮, 但是 1. 不解析变量 2. 替换的结果是统一的,保证不了大小写
    // ------------------------------------

    // 
    // {} new Object()  [] new Array()  // new RegExp()
    // 正则可以使用字面双斜杠的方式定义，也可以使用 new RegExp()来定义，new RegExp() 参数一正则表达式，参数2正则的匹配规则
    // replace方法，参数2 可以写替换的字符，还可以写一个函数，
    // 函数中有一个参数，就是匹配到的字符 而且函数必须有返回值
    let keyword = 'a'
    let reg = new RegExp(keyword, 'gi')
    const res = str.replace(reg, (val)=>{
      // console.log(val);
      return `<span style="color: red;">${val}</span>`
    })
    console.log(res)
    document.body.innerHTML = res
  </script>
</body>
</html>